import { hexToRgb } from '@/utils/transform';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const defaultColor = '#ccc';
export default function ScoreDimensionCmp(props: any) {
  const { cmpdata } = props;
  const chartDom = useRef<HTMLDivElement>(null);
  const myChart = useRef<echarts.EChartsType>();
  const indicatorNameList = ['司机相关', '驾驶陋习', '主动安全', '速度相关'];
  useEffect(() => {
    if ((!myChart.current || myChart.current.isDisposed()) && chartDom.current) {
      myChart.current = echarts.init(chartDom.current);

      myChart.current.setOption({
        tooltip: {
          borderWidth: 0,
          // position: ["80%", "5%"],
          // transitionDuration: 0.8,
          formatter: (params: { color: string; seriesName: string; value: number[] }) => {
            let str = '<div style="color: #333; font-size: 12px;border: unset;margin-top: 10px;">';
            // str += `<div style="color: #333; font-weight: bold;">${params.seriesName}</div>`
            str += '<div style="margin-bottom: -8px;border: unset;"></div>';
            params.value.forEach((item, index: number) => {
              str += `<div style="display: flex; justify-content: space-between; font-size:12px; line-height: 16px; height: 16px; margin-top: 8px; align-items: center;border: unset;">
              <div style="border: unset;">${indicatorNameList[index]}</div> 
              <div style="display: inline-block; text-align: right; padding-left: 16px;border: unset;">
              <span style="text-align: right;display: flex;justify-content: flex-start;align-items: center;border: unset;"><span style="font-size: 14px;margin-right: 2px;border: unset;">${item}</span>分</span>
              </div></div>`;
            });
            str += '</div>';
            return str;
          },
        },
        // title: {
        //   left: 'center',
        //   top: '23.3%',
        //   textStyle: {
        //     fontWeight: 'bold',
        //     fontSize: '48px',
        //   },
        // },
        radar: {
          // 雷达图半径
          radius: '50%',
          center: ['50%', '50%'],

          // triggerEvent: false,
          indicator: [
            { name: '司机相关', max: cmpdata.aTotalScore ? Math.round(cmpdata.aTotalScore) : 0 },
            { name: '驾驶陋习', max: cmpdata.bTotalScore ? Math.round(cmpdata.bTotalScore) : 0 },
            { name: '主动安全', max: cmpdata.cTotalScore ? Math.round(cmpdata.cTotalScore) : 0 },
            { name: '速度相关', max: cmpdata.dTotalScore ? Math.round(cmpdata.dTotalScore) : 0 },
          ],
          axisName: {
            padding: [-10, -10, -20, -10],
            align: 'center',
            textWrap: true,
            fontWeight: '500',
            fontSize: '12px',
            color: '#666',
            width: 10,
            lineHeight: 16,
            formatter: function (params: string) {
              const index = indicatorNameList.findIndex((name) => name === params);
              if (index === 1 || index === 3) {
                return params.slice(0, 2) + '\n' + params.slice(2, params.length);
              }
              return params;
            },
          },
          axisLine: {
            lineStyle: {
              color: hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.2),
              // color: {
              //   x: 0,
              //   y: 0,
              //   x2: 1,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: hexToRgb(
              //         data?.gradeColorShape ?? defaultColor,
              //         0.32
              //       )
              //     },
              //     {
              //       offset: 1,
              //       color: hexToRgb(
              //         data?.gradeColorShape ?? defaultColor,
              //         0
              //       )
              //     }
              //   ]
              // }
            },
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: [
                // hexToRgb(data?.gradeColorShape, 0.08),
                // hexToRgb(data?.gradeColorShape, 0.16),
                // hexToRgb(data?.gradeColorShape, 0.24),
                // hexToRgb(data?.gradeColorShape, 0.32),
                // hexToRgb(data?.gradeColorShape, 0.4),
                // hexToRgb(data?.gradeColorShape, 0.48)

                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.0),
                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.02),
                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.04),
                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.08),
                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.12),
                hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0.16),
              ],
              // color: "#f0f0f0"
            },
          },
          // nameGap: '25',
          // splitArea: {
          //   areaStyle: {
          //     color: 'transparent',
          //   },
          // },
          // axisLine: {
          //   lineStyle: {
          //     type: 'dashed',
          //   },
          // },
        },
        series: [
          {
            name: '',
            type: 'radar',
            // symbolSize: 6,
            // itemStyle: {
            //   borderColor: '#fff',
            //   borderWidth: 1,
            // },
            // lineStyle: {
            //   normal: {
            //     width: 1,
            //   },
            // },
            data: [
              {
                value: [cmpdata.aScore, cmpdata.bScore, cmpdata.cScore, cmpdata.dScore],
                areaStyle: {
                  // color: hexToRgb(data?.gradeColorShape, 0.4)
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 0),
                        },
                        {
                          offset: 1,
                          color: hexToRgb(cmpdata.gradeColorShape ?? defaultColor, 1),
                        },
                      ],
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: cmpdata.gradeColorShape ?? defaultColor,
                  },
                },
                lineStyle: {
                  normal: {
                    color: cmpdata.gradeColorShape ?? defaultColor,
                  },
                },
              },
            ],
          },
        ],
      });

      // myChart.current.on("mouseover", () => {
      //   myChart?.current?.setOption({
      //     title: {
      //       show: true
      //     }
      //   })
      // })

      // myChart.current.on("mouseout", () => {
      //   myChart?.current?.setOption({
      //     title: {
      //       show: false
      //     }
      //   })
      // })

      // return () => {
      //   if (myChart.current && !myChart.current.isDisposed()) {
      //     echarts.dispose(myChart.current);
      //   }
      // };
    }
  }, []);
  return (
    <div
      ref={chartDom}
      style={{
        width: 130,
        height: 130,
      }}
    ></div>
  );
}
